<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="他人回复" name="first">
        <ul class="otherconclass">
          <li v-for="item in datas" :key="item.id">
            <p>{{ item.title }}</p>
            <div class="con-class">
              <span
                >回复:<span>{{ item.content }}</span></span
              >
              <span>评论时间:{{ item.ctime | getTime }}</span>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="我的评论" name="second">
        <ul class="otherconclass">
          <li v-for="item in selDatas" :key="item.id">
            <p>{{ item.title }}</p>
            <div class="con-class">
              <span
                >你的评论:<span>{{ item.content }}</span></span
              >
              <span>评论时间:{{ item.ctime | getTime }}</span>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <div style="text-align:center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="itemsPerPage"
         :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [],
      selDatas: [],
      activeName: "first",
      page: 1,
      itemsPerPage: 4,
      total: 0,
      user: "",
    };
  },
  filters: {
    getTime(val) {
      if (val) {
        return val.substring(0, val.indexOf(" "));
      }
      return val;
    },
  },
  created() {
    this.getDatas();
    this.user = JSON.parse(localStorage.getItem("etoak_cms_user"));
    this.getselDatas();
  },
  methods: {
    getDatas() {
      this.$dao
        .selectOtherCommentById(
          localStorage.getItem("etoak_cms_token"),
          this.page,
          this.itemsPerPage
        )
        .then((res) => {
          if (res.data.flag) {
            this.datas = res.data.data.filter(
              (item) => item.uid !== localStorage.getItem("etoak_cms_token")
            );
            this.total = res.data.total;
            // console.log(this.datas);
          } else {
            this.$message.error("查询失败");
          }
        });
    },
    getselDatas() {
      this.$dao
        .selectMyCommentById(
          localStorage.getItem("etoak_cms_token"),
          this.page,
          this.itemsPerPage
        )
        .then((res) => {
          if (res.data.flag) {
            this.selDatas = res.data.data;
            this.total = res.data.total;
          } else {
            this.$message.error("查询失败");
          }
        });
    },
    handleClick() {
      this.page = 1;
      if (this.activeName === "first") {
        this.getDatas();
      } else {
        this.getselDatas();
      }
    },
    handleSizeChange(val) {
      this.itemsPerPage = val;
      if (this.activeName === "first") {
        this.getDatas();
      } else {
        this.getselDatas();
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.activeName === "first") {
        this.getDatas();
      } else {
        this.getselDatas();
      }
    },
  },
};
</script>
<style scoped>
.otherconclass li {
  margin-bottom: 20px;
  list-style: none;
  border-bottom: 1px solid seagreen;
}
.con-class {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
</style>
